<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.8.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="TodoItemeslint-plugin-vue todo调试技巧 todo前端加密的库CryptoJS使用demo todo以及相同的流行的库有什么？ Vue的生命周期 todoProblem SolutionVue.js devtools灰色状态首先要确保编译的控制台没有error,在Sources里面有源码可以debug。 Invalid prop: type check failed f">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue系列之基础知识">
<meta property="og:url" content="http://yoursite.com/2019/10/15/Vue系列之基础知识/index.html">
<meta property="og:site_name" content="Feng&#39;s Blog">
<meta property="og:description" content="TodoItemeslint-plugin-vue todo调试技巧 todo前端加密的库CryptoJS使用demo todo以及相同的流行的库有什么？ Vue的生命周期 todoProblem SolutionVue.js devtools灰色状态首先要确保编译的控制台没有error,在Sources里面有源码可以debug。 Invalid prop: type check failed f">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-05-22T13:56:54.411Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue系列之基础知识">
<meta name="twitter:description" content="TodoItemeslint-plugin-vue todo调试技巧 todo前端加密的库CryptoJS使用demo todo以及相同的流行的库有什么？ Vue的生命周期 todoProblem SolutionVue.js devtools灰色状态首先要确保编译的控制台没有error,在Sources里面有源码可以debug。 Invalid prop: type check failed f">

<link rel="canonical" href="http://yoursite.com/2019/10/15/Vue系列之基础知识/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-Hans'
  };
</script>

  <title>Vue系列之基础知识 | Feng's Blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Feng's Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>About</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>Categories</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-Hans">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/10/15/Vue系列之基础知识/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Fengorz">
      <meta itemprop="description" content="A Quiet Departure.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Feng's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Vue系列之基础知识
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2019-10-15 21:11:24" itemprop="dateCreated datePublished" datetime="2019-10-15T21:11:24+08:00">2019-10-15</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">Edited on</span>
                <time title="Modified: 2020-05-22 21:56:54" itemprop="dateModified" datetime="2020-05-22T21:56:54+08:00">2020-05-22</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="TodoItem"><a href="#TodoItem" class="headerlink" title="TodoItem"></a>TodoItem</h1><h2 id="eslint-plugin-vue-todo"><a href="#eslint-plugin-vue-todo" class="headerlink" title="eslint-plugin-vue todo"></a>eslint-plugin-vue todo</h2><h2 id="调试技巧-todo"><a href="#调试技巧-todo" class="headerlink" title="调试技巧 todo"></a>调试技巧 todo</h2><h2 id="前端加密的库CryptoJS使用demo-todo"><a href="#前端加密的库CryptoJS使用demo-todo" class="headerlink" title="前端加密的库CryptoJS使用demo todo"></a>前端加密的库CryptoJS使用demo todo</h2><p>以及相同的流行的库有什么？</p>
<h2 id="Vue的生命周期-todo"><a href="#Vue的生命周期-todo" class="headerlink" title="Vue的生命周期 todo"></a>Vue的生命周期 todo</h2><h1 id="Problem-Solution"><a href="#Problem-Solution" class="headerlink" title="Problem Solution"></a>Problem Solution</h1><h2 id="Vue-js-devtools灰色状态"><a href="#Vue-js-devtools灰色状态" class="headerlink" title="Vue.js devtools灰色状态"></a>Vue.js devtools灰色状态</h2><p>首先要确保编译的控制台没有error,在Sources里面有源码可以debug。</p>
<h2 id="Invalid-prop-type-check-failed-for-prop-“queryForm”-Expected-Array-got-Promise"><a href="#Invalid-prop-type-check-failed-for-prop-“queryForm”-Expected-Array-got-Promise" class="headerlink" title="Invalid prop: type check failed for prop “queryForm”. Expected Array, got Promise"></a>Invalid prop: type check failed for prop “queryForm”. Expected Array, got Promise</h2><p>原因是因为prop “queryForm”，期待拿到的是一个Array数组对象，但是传进去的却是一个Promise对象，所以抛出这个报错，类似的错误一般会有：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[Vue warn]: Invalid prop: type check failed for prop &quot;data&quot;. Expected Array, got String.</span><br></pre></td></tr></table></figure></p>
<h2 id="Vue中监听路由参数变化的方法"><a href="#Vue中监听路由参数变化的方法" class="headerlink" title="Vue中监听路由参数变化的方法"></a>Vue中监听路由参数变化的方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">      $route()&#123;</span><br><span class="line">        this.pjtid = this.$route.query.pjtid</span><br><span class="line">      &#125;,</span><br><span class="line">      pjtid() &#123;</span><br><span class="line">        this.pjtdetail()</span><br><span class="line">      &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>还可以监听url的前后变化：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$route (to, from) &#123;</span><br><span class="line">      this.init()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="VueRouter进不去组件的原因"><a href="#VueRouter进不去组件的原因" class="headerlink" title="VueRouter进不去组件的原因"></a>VueRouter进不去组件的原因</h2><blockquote>
<p>有可能是父路径的path忘记以/开头了，比如：</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">export default [&#123;</span><br><span class="line">  path: &apos;index&apos;,</span><br><span class="line">  component: $ =&gt; import(&apos;@/page/index/Index&apos;)</span><br><span class="line">&#125;, &#123;</span><br><span class="line">  path: &apos;vocabulary&apos;,</span><br><span class="line">  component: $ =&gt; import(&apos;@/page/word/Search&apos;),</span><br><span class="line">  children: [&#123;</span><br><span class="line">    path: &apos;detail&apos;,</span><br><span class="line">    component: $ =&gt; import(&apos;@/page/word/Detail&apos;)</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    path: &apos;starList&apos;,</span><br><span class="line">    component: $ =&gt; import(&apos;@/page/word/StarList&apos;)</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    path: &apos;starListDetail&apos;,</span><br><span class="line">    component: $ =&gt; import(&apos;@/page/word/StarListDetail&apos;)</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;]</span><br></pre></td></tr></table></figure>
<p>这样子的话浏览器访问<a href="http://localhost:8080/#/index会出现空白!" target="_blank" rel="noopener">http://localhost:8080/#/index会出现空白!</a></p>
<h2 id="filters-调用到this对象的data、methods"><a href="#filters-调用到this对象的data、methods" class="headerlink" title="filters 调用到this对象的data、methods"></a>filters 调用到this对象的data、methods</h2><p><a href="https://blog.csdn.net/ee_11eeeeee/article/details/102961376" target="_blank" rel="noopener">https://blog.csdn.net/ee_11eeeeee/article/details/102961376</a></p>
<h2 id="Avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever"><a href="#Avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever" class="headerlink" title="Avoid mutating a prop directly since the value will be overwritten whenever"></a>Avoid mutating a prop directly since the value will be overwritten whenever</h2><p>props从父组件传递数据到子组件，不能子组件更改修改父组件，单向传递，用临时局部变量代替。</p>
<h1 id="Basic-Knowledge"><a href="#Basic-Knowledge" class="headerlink" title="Basic Knowledge"></a>Basic Knowledge</h1><h2 id="重要备忘"><a href="#重要备忘" class="headerlink" title="重要备忘"></a>重要备忘</h2><ul>
<li>在标签的属性与vue的变量或者方法绑定中，千万记得不要使用this.开头，这样子会读取到标签本身的属性值的</li>
<li>vue的html标签如果属性绑定调用的是方法返回的，注意要在方法名后面加上()，不然可能会被解析为变量名</li>
<li>引入js的单个或这个静态的方法或变量，一定要加{}，比如：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import &#123;BILL_BUTTON_CONFIGS&#125; from &apos;./buttonConfig&apos;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>不能是：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import BILL_BUTTON_CONFIGS from &apos;./buttonConfig&apos;</span><br></pre></td></tr></table></figure></p>
<p>不然里面的BILL_BUTTON_CONFIGS常量使用会undefined</p>
<ul>
<li>v-bind绑定是可以使用三目运算符的<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:class=&quot;taskVO.selected?&apos;selected&apos;:&apos;&apos;&quot;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="log打印"><a href="#log打印" class="headerlink" title="log打印"></a>log打印</h2><p>如果变量打印前面加了字符串拼接的话，chrome是不会自动打印变量的具体内容的！</p>
<h2 id="API-in-common-use"><a href="#API-in-common-use" class="headerlink" title="API in common use"></a>API in common use</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">v:bind:attribute</span><br><span class="line">v-html</span><br><span class="line">v-on:click</span><br><span class="line">v-on:dblclick</span><br><span class="line">v-on:mousemove</span><br><span class="line"></span><br><span class="line">v-on:可以用@代替</span><br></pre></td></tr></table></figure>
<h2 id="vue-import"><a href="#vue-import" class="headerlink" title="vue import @"></a>vue import @</h2><p>@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径</p>
<h2 id="使用Vue-prototype实现全局变量"><a href="#使用Vue-prototype实现全局变量" class="headerlink" title="使用Vue.prototype实现全局变量"></a>使用Vue.prototype实现全局变量</h2><p>当你在main.js里声明了Vue.prototype.a = 1后，因为你的每一个vue组件都是一个Vue对象的实例，所以即使你没有在组件内部使用data(){return{……}}声明a，你依然可以在组件中通过this.a来访问。</p>
<h2 id="Template-Literals（模板对象）-in-ES6"><a href="#Template-Literals（模板对象）-in-ES6" class="headerlink" title="Template Literals（模板对象） in ES6"></a>Template Literals（模板对象） in ES6</h2><p>如在es5中拼凑字符串需要+’’以及变量名<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var name = &apos;Your name is &apos; + first + &apos; &apos; + last + &apos;.&apos;;</span><br><span class="line">var url = &apos;http://localhost:3000/api/messages/&apos; + id;</span><br></pre></td></tr></table></figure></p>
<p>在es6中新增添了${}的使用方法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var name = `Your name is $&#123;first&#125; $&#123;last&#125;. `;</span><br><span class="line">var url = `http://localhost:3000/api/messages/$&#123;id&#125;`;</span><br></pre></td></tr></table></figure></p>
<h2 id="no-undef"><a href="#no-undef" class="headerlink" title="no-undef"></a>no-undef</h2><p>“extends”: “eslint:recommended”配置文件中的属性启用此规则。<br>此规则可以帮助您查找由变量和参数名称拼写错误或意外隐式全局变量（例如，var在for循环初始值设定项中遗忘关键字）导致的潜在ReferenceErrors 。</p>
<h2 id="style-scoped"><a href="#style-scoped" class="headerlink" title="style scoped"></a>style scoped</h2><p>在Vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有vue组件style标签全部加上了scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。</p>
<h2 id="v-model-vs-model"><a href="#v-model-vs-model" class="headerlink" title="v-model vs :model"></a>v-model vs :model</h2><p>v-model是vue内置的控件和变量之间双向数据绑定的指令，如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--input输入框，值会在&lt;p&gt;标签打印出来--&gt;</span><br><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">     &lt;input type=&quot;text&quot; v-model=&quot;message&quot; placeholder=&quot;请输入&quot;&gt;</span><br><span class="line">    &lt;p&gt;输入的内容是: &#123;&#123;message&#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var  vue=new Vue(&#123;</span><br><span class="line">        el:&apos;#app&apos;,</span><br><span class="line">        data:&#123;</span><br><span class="line">           message:&apos;&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></p>
<p>:model相当于v-bind:model的缩写，<br>    v-bind动态绑定指令，默认情况下控件自带属性的值是固定的。<br>    这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。<br>    当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。</p>
<p>用v-bind和v-on指令实现v-model，如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--input输入框--&gt;</span><br><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;!--把message字段的值作为input标签的value属性值，同时监听输入事件，实时更新message的值--&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; @input=&quot;handleInput($event)&quot;  placeholder=&quot;请输入&quot;  v-bind:value=&quot;message&quot;&gt;</span><br><span class="line">    &lt;p&gt;输入的内容是: &#123;&#123;message&#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var  vue=new Vue(&#123;</span><br><span class="line">        el:&apos;#app&apos;,</span><br><span class="line">        data:&#123;</span><br><span class="line">            message:&apos;&apos;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods:&#123;</span><br><span class="line">            handleInput: function (event) &#123;</span><br><span class="line">                console.info(&quot;控制台打印event详情&quot;)</span><br><span class="line">                console.info(event)</span><br><span class="line">                console.info(event.toLocaleString());</span><br><span class="line">                this.message=event.target.value;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></p>
<h2 id="XML-DOM自带的validate方法"><a href="#XML-DOM自带的validate方法" class="headerlink" title="XML DOM自带的validate方法"></a>XML DOM自带的validate方法</h2><p>查看js源码发现，如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">export interface IXMLDOMSchemaCollection &#123;</span><br><span class="line">        length: number;</span><br><span class="line">        namespaceURI(index: number): string;</span><br><span class="line">        validateOnLoad: boolean;</span><br><span class="line"></span><br><span class="line">        add(namespaceURI: string, schema: string|IXMLDOMNode): void;</span><br><span class="line">        addCollection(collection: IXMLDOMSchemaCollection): void;</span><br><span class="line">        get(namespaceURI: string): IXMLDOMNode;</span><br><span class="line">        getDeclaration(node: IXMLDOMNode): ISchemaItem;</span><br><span class="line">        getSchema(namespaceURI: string): ISchema;</span><br><span class="line">        remove(namespaceURI: string): void;</span><br><span class="line">        validate(): void;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></p>
<p>因此，在vue的代码中，form对象可以直接调用validate()，如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">handleLogin () &#123;</span><br><span class="line">  this.$refs.loginForm.validate(valid =&gt; &#123;</span><br><span class="line">    if (valid) &#123;</span><br><span class="line">      this.$store.dispatch(&quot;LoginByUsername&quot;, this.loginForm).then(() =&gt; &#123;</span><br><span class="line">        this.$router.push(&#123; path: this.tagWel.value &#125;);</span><br><span class="line">      &#125;).catch(()=&gt;&#123;</span><br><span class="line">        this.refreshCode()</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="vue中this-router-push-路由传值和获取的两种常见方法"><a href="#vue中this-router-push-路由传值和获取的两种常见方法" class="headerlink" title="vue中this.$router.push()路由传值和获取的两种常见方法"></a>vue中this.$router.push()路由传值和获取的两种常见方法</h2><p><a href="https://www.cnblogs.com/toonezhr/p/10325457.html" target="_blank" rel="noopener">https://www.cnblogs.com/toonezhr/p/10325457.html</a></p>
<h2 id="Vue-extend-new-Vue-Vue-component-render"><a href="#Vue-extend-new-Vue-Vue-component-render" class="headerlink" title="Vue.extend, new Vue(), Vue.component(), render"></a>Vue.extend, new Vue(), Vue.component(), render</h2><p><a href="https://www.jianshu.com/p/ae319db5b456" target="_blank" rel="noopener">https://www.jianshu.com/p/ae319db5b456</a></p>
<h2 id="vue-sync修饰符"><a href="#vue-sync修饰符" class="headerlink" title="vue sync修饰符"></a>vue sync修饰符</h2><p>vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。<br><a href="https://www.jianshu.com/p/6b062af8cf01" target="_blank" rel="noopener">https://www.jianshu.com/p/6b062af8cf01</a></p>
<h2 id="常用属性"><a href="#常用属性" class="headerlink" title="常用属性"></a>常用属性</h2><p>vm.$el<br>获取Vue实例关联的DOM元素；</p>
<p>vm.$data<br>获取Vue实例的data选项（对象）</p>
<p>vm.$options<br>获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）</p>
<p>vm.$refs<br>获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）<br><a href="https://www.jianshu.com/p/f6f3f00cd923" target="_blank" rel="noopener">https://www.jianshu.com/p/f6f3f00cd923</a></p>
<h2 id="vue-use和vue-prototype的区别"><a href="#vue-use和vue-prototype的区别" class="headerlink" title="vue.use和vue.prototype的区别"></a>vue.use和vue.prototype的区别</h2><h2 id="watch、mounted、computed、created的区别-todo"><a href="#watch、mounted、computed、created的区别-todo" class="headerlink" title="watch、mounted、computed、created的区别 todo"></a>watch、mounted、computed、created的区别 todo</h2><h3 id="created和mounted的区别"><a href="#created和mounted的区别" class="headerlink" title="created和mounted的区别"></a>created和mounted的区别</h3><p>created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。</p>
<p>mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点。</p>
<h4 id="二者的执行顺序"><a href="#二者的执行顺序" class="headerlink" title="二者的执行顺序"></a>二者的执行顺序</h4><p>嵌套组件中两者的执行顺序不同。</p>
<p>父组件 created</p>
<p>子组件 created</p>
<p>子组件 mounted</p>
<p>父组件 mounted</p>
<h3 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h3><h4 id="watch的高级用法"><a href="#watch的高级用法" class="headerlink" title="watch的高级用法"></a>watch的高级用法</h4><p>监听变量originList的变化，如果变化了调用init方法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted () &#123;</span><br><span class="line">    this.$watch(&quot;originList&quot;, this.init)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="gt-import-“-components-common-Empty”-这是什么写法？"><a href="#gt-import-“-components-common-Empty”-这是什么写法？" class="headerlink" title="$=&gt;import(“@/components/common/Empty”)这是什么写法？"></a>$=&gt;import(“@/components/common/Empty”)这是什么写法？</h2><h2 id="this-options"><a href="#this-options" class="headerlink" title="this.$options"></a>this.$options</h2><p>通过this.$options调用方法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">his.$options.methods.getPicData.call(this)</span><br></pre></td></tr></table></figure></p>
<p>带参数的调用：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$options.methods.getPicData.call(this,data)</span><br></pre></td></tr></table></figure></p>
<h2 id="this-emit-Vue子组件向父组件传值"><a href="#this-emit-Vue子组件向父组件传值" class="headerlink" title="this.$emit()/Vue子组件向父组件传值"></a>this.$emit()/Vue子组件向父组件传值</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$emit(&apos;refreshCodeTreeFun&apos;)</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;vercode-info ref=&quot;vercodeInfo&quot; v-if=&quot;showVercodeTable&quot;</span><br><span class="line">				:parent-id=&quot;parentId&quot;</span><br><span class="line">				:current-id=&quot;currentId&quot;</span><br><span class="line">				:parent-name=&quot;parentName&quot;</span><br><span class="line">				:default-node-type=&quot;defaultNodeType&quot;</span><br><span class="line">				:specialty-name=&quot;specialtyName&quot;</span><br><span class="line">				:specialty-id=&quot;specialtyId&quot;</span><br><span class="line">				@refreshCodeTreeFun=&quot;refreshCodeTreeFun&quot;&gt;&lt;/vercode-info&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">refreshCodeTreeFun () &#123;</span><br><span class="line">			this.showCodeTree = false</span><br><span class="line">			setTimeout(() =&gt; &#123;</span><br><span class="line">				this.showCodeTree = true</span><br><span class="line">			&#125;, 1)</span><br><span class="line">		&#125;</span><br></pre></td></tr></table></figure>
<h2 id="ref属性"><a href="#ref属性" class="headerlink" title="ref属性"></a>ref属性</h2><p>ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。</p>
<p>$refs 是所有注册过的ref的一个集合。</p>
<h2 id="vue语法-（模版字符串）"><a href="#vue语法-（模版字符串）" class="headerlink" title="vue语法 ${ }（模版字符串）"></a>vue语法 <code>${ }</code>（模版字符串）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">const name = &apos;小缘&apos;</span><br><span class="line">const age = 14</span><br><span class="line">console.info(`大家好，我叫$&#123;name&#125;，今年$&#123;age&#125;岁了`)</span><br><span class="line">// 等价于</span><br><span class="line">console.info(&apos;大家好，我叫&apos; + name + &apos;，今年&apos; + age + &apos;岁了&apos;)</span><br><span class="line"> </span><br><span class="line">// 最大的优势是支持换行字符串</span><br><span class="line">const url = &apos;//baidu.com&apos;</span><br><span class="line">const text = &apos;百度一下，你就知道&apos;</span><br><span class="line">const html = `</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;a href=&quot;$&#123;url&#125;&quot;&gt;$&#123;text&#125;&lt;/a&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">`</span><br><span class="line">————————————————</span><br><span class="line">版权声明：本文为CSDN博主「Hzsilvana」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。</span><br><span class="line">原文链接：https://blog.csdn.net/weixin_42776027/java/article/details/101197879</span><br></pre></td></tr></table></figure>
<h2 id="自定义setter方法，调用时一并返回对象"><a href="#自定义setter方法，调用时一并返回对象" class="headerlink" title="自定义setter方法，调用时一并返回对象"></a>自定义setter方法，调用时一并返回对象</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">export const createQueryFieldEnhance = function () &#123;</span><br><span class="line">	let field = &#123;</span><br><span class="line">		type: &apos;&apos;, propertyName: &apos;&apos;, fieldName: &apos;&apos;, dataSource: [], dataSourceCode: &apos;&apos;, isMultiple: false,</span><br><span class="line">		setType (type) &#123;</span><br><span class="line">			this.type = type</span><br><span class="line">			return this</span><br><span class="line">		&#125;,</span><br><span class="line">		setPropertyName (propertyName) &#123;</span><br><span class="line">			this.propertyName = propertyName</span><br><span class="line">			return this</span><br><span class="line">		&#125;,</span><br><span class="line">		setFieldName (fieldName) &#123;</span><br><span class="line">			this.fieldName = fieldName</span><br><span class="line">			return this</span><br><span class="line">		&#125;,</span><br><span class="line">		setDataSource (dataSource) &#123;</span><br><span class="line">			this.dataSource = dataSource</span><br><span class="line">			return this</span><br><span class="line">		&#125;,</span><br><span class="line">		setDataSourceCode (dataSourceCode) &#123;</span><br><span class="line">			this.dataSourceCode = dataSourceCode</span><br><span class="line">			return this</span><br><span class="line">		&#125;,</span><br><span class="line">		setIsMultiple (isMultiple) &#123;</span><br><span class="line">			this.isMultiple = isMultiple</span><br><span class="line">			return this</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	return field</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="vue组件之间通信的6种方式"><a href="#vue组件之间通信的6种方式" class="headerlink" title="vue组件之间通信的6种方式"></a>vue组件之间通信的6种方式</h2><h3 id="emit-on"><a href="#emit-on" class="headerlink" title="$emit / $on"></a>$emit / $on</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$emit(事件名,数据);</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">async mounted ()&#123;</span><br><span class="line">    this.$on(&quot;refresh&quot;, $=&gt;&#123;</span><br><span class="line">        // xxx</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="输入框Input监听回车"><a href="#输入框Input监听回车" class="headerlink" title="输入框Input监听回车"></a>输入框Input监听回车</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-input v-model=&quot;name&quot; @keyup.enter.native=&quot;onSubmit&quot; placeholder=&quot;User Name&quot;&gt;&lt;/el-input&gt;</span><br></pre></td></tr></table></figure>
<h2 id="vue监听浏览器窗口的变化"><a href="#vue监听浏览器窗口的变化" class="headerlink" title="vue监听浏览器窗口的变化"></a>vue监听浏览器窗口的变化</h2><p><a href="https://blog.csdn.net/weixin_34049948/article/details/86021903" target="_blank" rel="noopener">https://blog.csdn.net/weixin_34049948/article/details/86021903</a></p>
<h1 id="Tool"><a href="#Tool" class="headerlink" title="Tool"></a>Tool</h1><p><a href="http://www.html2jade.org/" target="_blank" rel="noopener">html和pug之间的转换</a></p>
<h2 id="倒计时组件"><a href="#倒计时组件" class="headerlink" title="倒计时组件"></a>倒计时组件</h2><p><a href="https://www.cnblogs.com/haoning/p/11686674.html" target="_blank" rel="noopener">https://www.cnblogs.com/haoning/p/11686674.html</a></p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/Vue/" rel="tag"># Vue</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/09/24/弃用主流ssr转战V2ray/" rel="prev" title="弃用主流ssr转战V2ray">
      <i class="fa fa-chevron-left"></i> 弃用主流ssr转战V2ray
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/10/15/网络、密码与安全/" rel="next" title="网络、密码与安全">
      网络、密码与安全 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#TodoItem"><span class="nav-number">1.</span> <span class="nav-text">TodoItem</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#eslint-plugin-vue-todo"><span class="nav-number">1.1.</span> <span class="nav-text">eslint-plugin-vue todo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#调试技巧-todo"><span class="nav-number">1.2.</span> <span class="nav-text">调试技巧 todo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#前端加密的库CryptoJS使用demo-todo"><span class="nav-number">1.3.</span> <span class="nav-text">前端加密的库CryptoJS使用demo todo</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue的生命周期-todo"><span class="nav-number">1.4.</span> <span class="nav-text">Vue的生命周期 todo</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Problem-Solution"><span class="nav-number">2.</span> <span class="nav-text">Problem Solution</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-js-devtools灰色状态"><span class="nav-number">2.1.</span> <span class="nav-text">Vue.js devtools灰色状态</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Invalid-prop-type-check-failed-for-prop-“queryForm”-Expected-Array-got-Promise"><span class="nav-number">2.2.</span> <span class="nav-text">Invalid prop: type check failed for prop “queryForm”. Expected Array, got Promise</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue中监听路由参数变化的方法"><span class="nav-number">2.3.</span> <span class="nav-text">Vue中监听路由参数变化的方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#VueRouter进不去组件的原因"><span class="nav-number">2.4.</span> <span class="nav-text">VueRouter进不去组件的原因</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#filters-调用到this对象的data、methods"><span class="nav-number">2.5.</span> <span class="nav-text">filters 调用到this对象的data、methods</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever"><span class="nav-number">2.6.</span> <span class="nav-text">Avoid mutating a prop directly since the value will be overwritten whenever</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Basic-Knowledge"><span class="nav-number">3.</span> <span class="nav-text">Basic Knowledge</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#重要备忘"><span class="nav-number">3.1.</span> <span class="nav-text">重要备忘</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#log打印"><span class="nav-number">3.2.</span> <span class="nav-text">log打印</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#API-in-common-use"><span class="nav-number">3.3.</span> <span class="nav-text">API in common use</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-import"><span class="nav-number">3.4.</span> <span class="nav-text">vue import @</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#使用Vue-prototype实现全局变量"><span class="nav-number">3.5.</span> <span class="nav-text">使用Vue.prototype实现全局变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Template-Literals（模板对象）-in-ES6"><span class="nav-number">3.6.</span> <span class="nav-text">Template Literals（模板对象） in ES6</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#no-undef"><span class="nav-number">3.7.</span> <span class="nav-text">no-undef</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#style-scoped"><span class="nav-number">3.8.</span> <span class="nav-text">style scoped</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model-vs-model"><span class="nav-number">3.9.</span> <span class="nav-text">v-model vs :model</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#XML-DOM自带的validate方法"><span class="nav-number">3.10.</span> <span class="nav-text">XML DOM自带的validate方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue中this-router-push-路由传值和获取的两种常见方法"><span class="nav-number">3.11.</span> <span class="nav-text">vue中this.$router.push()路由传值和获取的两种常见方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-extend-new-Vue-Vue-component-render"><span class="nav-number">3.12.</span> <span class="nav-text">Vue.extend, new Vue(), Vue.component(), render</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-sync修饰符"><span class="nav-number">3.13.</span> <span class="nav-text">vue sync修饰符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常用属性"><span class="nav-number">3.14.</span> <span class="nav-text">常用属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-use和vue-prototype的区别"><span class="nav-number">3.15.</span> <span class="nav-text">vue.use和vue.prototype的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#watch、mounted、computed、created的区别-todo"><span class="nav-number">3.16.</span> <span class="nav-text">watch、mounted、computed、created的区别 todo</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#created和mounted的区别"><span class="nav-number">3.16.1.</span> <span class="nav-text">created和mounted的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#二者的执行顺序"><span class="nav-number">3.16.1.1.</span> <span class="nav-text">二者的执行顺序</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#watch"><span class="nav-number">3.16.2.</span> <span class="nav-text">watch</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#watch的高级用法"><span class="nav-number">3.16.2.1.</span> <span class="nav-text">watch的高级用法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#gt-import-“-components-common-Empty”-这是什么写法？"><span class="nav-number">3.17.</span> <span class="nav-text">$=&gt;import(“@/components/common/Empty”)这是什么写法？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#this-options"><span class="nav-number">3.18.</span> <span class="nav-text">this.$options</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#this-emit-Vue子组件向父组件传值"><span class="nav-number">3.19.</span> <span class="nav-text">this.$emit()/Vue子组件向父组件传值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ref属性"><span class="nav-number">3.20.</span> <span class="nav-text">ref属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue语法-（模版字符串）"><span class="nav-number">3.21.</span> <span class="nav-text">vue语法 ${ }（模版字符串）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自定义setter方法，调用时一并返回对象"><span class="nav-number">3.22.</span> <span class="nav-text">自定义setter方法，调用时一并返回对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue组件之间通信的6种方式"><span class="nav-number">3.23.</span> <span class="nav-text">vue组件之间通信的6种方式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#emit-on"><span class="nav-number">3.23.1.</span> <span class="nav-text">$emit / $on</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#输入框Input监听回车"><span class="nav-number">3.24.</span> <span class="nav-text">输入框Input监听回车</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue监听浏览器窗口的变化"><span class="nav-number">3.25.</span> <span class="nav-text">vue监听浏览器窗口的变化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Tool"><span class="nav-number">4.</span> <span class="nav-text">Tool</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#倒计时组件"><span class="nav-number">4.1.</span> <span class="nav-text">倒计时组件</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Fengorz</p>
  <div class="site-description" itemprop="description">A Quiet Departure.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">125</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">68</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">87</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Fengorz</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a>
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script><script src="/js/motion.js"></script>
<script src="/js/schemes/pisces.js"></script>
<script src="/js/next-boot.js"></script>



  















  

  

</body>
</html>
